<template>
	<div class="searchWrap_div">
		<div class="search_div">
			<span class="icon-search"></span>
			<input type="text" name="" v-model="searVal" placeholder="城市 / 区域 / 景点">
			<span class="btn_cancle" @click="btn_back">取消</span>
		</div>
		<div class="tl" style="height: 1.2rem;line-height: 1.2rem; padding:0 0.4rem;color: #333; font-size: 0.4rem; background-color: #F5F5F5;">国内热门</div>
		<div class="hotAdd_div">
			<ul>
			    <li class="hotAdd_li cur_hotAdd_li">北京</li>
			    <li class="hotAdd_li">上海</li>
			    <li class="hotAdd_li">天津</li>
			    <li class="hotAdd_li">石家庄</li>
			    <li class="hotAdd_li">北京</li>
			    <li class="hotAdd_li">上海</li>
			    <li class="hotAdd_li">天津</li>
			    <li class="hotAdd_li">石家庄</li>
			</ul>
		</div>
		<div class="tl" style="height: 1.2rem;line-height: 1.2rem; padding:0 0.4rem;color: #333; font-size: 0.4rem; background-color: #F5F5F5;">国际热门</div>
		<div class="hotAdd_div">
			<ul>
			    <li class="hotAdd_li">伦敦</li>
			    <li class="hotAdd_li">纽约</li>
			    <li class="hotAdd_li">天津</li>
			    <li class="hotAdd_li">石家庄</li>
			    <li class="hotAdd_li">北京</li>
			    <li class="hotAdd_li">上海</li>
			    <li class="hotAdd_li">天津</li>
			    <li class="hotAdd_li">石家庄</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				searVal: '',
			}
		},
		components:{

		},
		beforeRouteEnter:function(to,from,next){
			next(function(vm){
				if(from.path == '/index'){// 判断上一页路由来源， 如果为首页，设置当前要请求首页的接口， 如果为监控，...
					console.log('11')
					//vm.$store.state._dispatchType = 'index';
					//vm.dispatchType = 'index';
				}
			});
		},
		computed:{
			
		},
		methods:{
			btn_search:function(){

			},
			btn_back:function(){
				this.searVal = '';
				this.$router.go(-1);
			}
		}
	}
</script>
<style rel="stylesheet" scoped>
	.search_div input[type=text]{
		width: 80% !important;
		float: left;
	}
	.btn_cancle{
		display: inline-block;
	    height: 0.8rem;
	    line-height: 0.8rem;
	    font-family: PingFangSC-Regular;
	    font-size: 0.3733rem;
	    color: #323232;
	    letter-spacing: 0.0048rem;
	    cursor: pointer;
	}
	.hotAdd_div ul{
		overflow: hidden;
		padding: 0.4rem;
	}
	.hotAdd_div ul li:nth-child(4n+1){
		margin-left: 0;
	}
	.hotAdd_div ul li:nth-child(n+5){
		margin-top: 0.4rem;
	}
	.hotAdd_li{
		text-align: center;
		float: left;
		width: 20%;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-left: 0.4rem;
		border: 1px solid #DCDCDC;
		border-radius: 0.08rem;
	}
	.cur_hotAdd_li{
		border: 1px solid #F37B3E !important;
		color: #F37B3E !important;
	}
</style>